<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>图片场景</title>
	<link rel="stylesheet" type="text/css" href="/css/login.css">
	<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="/js/vue.js"></script>
	<script type="text/javascript" src="/js/config.js"></script>
	<script type="text/javascript" src="/js/jquery.serializejson.js"></script>
	<script type="text/javascript" src="/js/layer/layer.js"></script>
	<script type="text/javascript" src="/js/paging.js"></script>
</head>
<body style="background:#fff;">
<div class="" id="app">
	<table style="width: 100%">
		<tr>
			<td style="text-align: right"><a onclick="newImageView()"  class="add-button  opr-url">新增场景图片</a></td>
			<td style="text-align: left"><a onclick="newImageType()"  class="add-button  opr-url">新增图片类型</a></td>
		</tr>
	</table>

	<table class="list-box gate-table">
		<thead>
		<tr>
			<th>场景ID</th>
			<th>场景名称</th>
			<th>操作</th>
		</tr>
		</thead>
		<tbody>
		<tr v-for="re in res">
			<td>
				<p>{{re.imageViewId}}</p>
			</td>
			<td>
				<p>{{re.imageViewName}}</p>
			</td>
			<td>
				<a href='#' class="over-small" v-bind:data-imageViewId="re.imageViewId"  onclick="editImageView(this)">编辑</a>
			</td>
		</tr>
		</tbody>
	</table>
	<!-- 编辑图片场景信息  -->
	<form class="cell-content" id="updateImageViewForm" style="display: none;" >
		<div class="cell">
			<label><span class="red">*</span>图片场景ID</label>
			<input type="text" name="imageViewId" id="imageViewId" v-model="imageView.imageViewId">
		</div>
		<div class="cell">
			<label><span class="red">*</span>图片场景名称</label>
			<input type="text" name="imageViewName" id="imageViewName" v-model="imageView.imageViewName">
		</div>
		<div class="cell">
			<input type="text" style="display: none;" id="imageViewTypeList" name="imageViewTypeList" v-model="typeKeyOption">
			<label style="float: left"><span class="red">*</span>选择需要添加的图片类型</label>
			<div class="image-box">
				<div v-for="imageType in imageTypeList">
					<input type="checkbox" class="image-option" :id="imageType.imageTypeId" v-model="typeKeyOption" :value="imageType.imageTypeKey">
					<label :for="imageType.imageTypeId" class="image-option-txt" >{{imageType.imageTypeName}}</label>
				</div>
			</div>
			<table></table>
		</div>
	</form>

	<!-- 图片类型  -->
	<form class="cell-content" id="imageTypeForm" style="display: none;" >
		<div class="cell">
			<label><span class="red">*</span>图片类型KEY</label>
			<input type="text" name="imageTypeKey" id="imageTypeKey">
		</div>
		<div class="cell">
			<label><span class="red">*</span>图片类型名称</label>
			<input type="text" name="imageTypeName" id="imageTypeName">
		</div>
	</form>

</div>
<div id="page" class="page_div"></div>
<style>
	.image-option{
		display: inline-block;
		margin:0;
		width: 15px;
		height:15px;
		padding: 0;
	}
	.image-box{max-height:200px;
		min-height:50px;
		min-width: 200px;
		border:solid 0.9px #c9c9c9;
		clear: both;
		float: left;
		overflow-y: auto; background: #FFFFE0 ;margin-left:105px;
		display: block;
		padding:10px 30px;}
	.image-box>div{
		line-height:30px;
		display: block; text-align: center;}
	.image-option-txt{}
	.cell:after{
		content: '';
		display: block;
		clear: both;}
</style>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data: {
            res:[],
            typeKeyOption:[],
            imageTypeList:[],
            imageViewTypeList:[],
            imageViewType:{},
            imageView:{}
        },
        methods: {

        },
    });

    var pageIndexNow = 1;

    $.ajax({
        type: "get",      //data 传送数据类型。post 传递
        dataType: 'json',  // 返回数据的数据类型json
        url: defaultUrl+"/controller/imageView/getImageViewNum",  // yii 控制器/方法
        cache: false,
        error:function(){
            alert("数据传输错误");
        },success: function (data) {

            console.log(data);
            if (data.code != 1) {
                return false
            }
            var pageTotal = data.result.total;
            var pageNumTotal = Math.ceil(pageTotal/20);
            $("#page").paging({
                pageNo:pageIndexNow,
                totalPage: pageNumTotal,
                totalSize: pageTotal,
                callback: function(num) {
                    pageIndexNow = num;
                    initList(num);
                }
            });
        }
    });

    function initList(pageIndex){
        $.ajax({
            type: "get",      //data 传送数据类型。post 传递
            dataType: 'json',  // 返回数据的数据类型json
            url: defaultUrl+"/controller/imageView/getImageViewList",  // yii 控制器/方法
            cache: false,
            data: {'pageIndex': pageIndex,'pageSize':'20'},  //传送的数据
            error:function(){
                alert("数据传输错误");
            },success: function (data) {
                console.log(data);
                if (data.code != 1) {
                    return false
                }
                vm.res = data.result;
            }
        });
    }
    initList(1);

    function getImgtype(){
        $.get(defaultUrl+"/controller/imageType/getImageTypeList",function(data1){
            vm.imageTypeList = data1.result;
        },'json');
    }
    getImgtype()

    function newImageView(){
        $('#imageViewId').attr("disabled",false);
        vm.imageView = {}
        vm.typeKeyOption = []
        layer.open({
            type: 1,
            title:'新增场景图片信息',
            area: ['600px', '500px'],
            fixed: false, //不固定
            maxmin: true,
            content: $('#updateImageViewForm'),
            btn:['确定','取消'],
            yes:function(){
                $.ajax({
                    type: "get",      //data 传送数据类型。post 传递
                    dataType: 'json',  // 返回数据的数据类型json
                    url: defaultUrl + "/controller/imageView/insertImageView",  // yii 控制器/方法
                    cache: false,
                    data: $('#updateImageViewForm').serializeJSON(),
                    error:function(){
                        // alert("数据传输错误");
                    },success: function (data) {
                        if(data.code == 2){
                            layer.msg(data.msg);
                            return;
                        }
                        layer.closeAll();
                        layer.msg(data.msg);
                        location.reload();
                    }
                });
            },
        });
    }

    function editImageView(ele) {
        var _this = $(ele);
        $('#imageViewId').attr("disabled",true);
        $.ajax({
            type: "get",      //data 传送数据类型。post 传递
            dataType: 'json',  // 返回数据的数据类型json
            url: defaultUrl + "/controller/imageView/getImageViewListById",  // yii 控制器/方法
            data: {"imageViewId": _this.attr("data-imageViewId")},
            cache: false,
            error: function () {
                // alert("数据传输错误");
            }, success: function (data) {
//                console.log(data.result)
                vm.imageView = data.result[0];
                vm.typeKeyOption = data.result.map(item=>item.imageViewType.imageViewKey)
            }
        });

        layer.open({
            type: 1,
            title: '修改图片场景信息',
            area: ['600px', '500px'],
            fixed: false, //不固定
            maxmin: true,
            content: $('#updateImageViewForm'),
            btn: ['确定', '取消'],
            yes: function () {
                $.ajax({
                    type: "get",      //data 传送数据类型。post 传递
                    //contentType: "application/json",
                    dataType: 'json',  // 返回数据的数据类型json
                    url: defaultUrl + "/controller/imageView/updateImageView?imageViewId=" + _this.attr("data-imageViewId"),  // yii 控制器/方法
                    cache: false,
                    data: $('#updateImageViewForm').serializeJSON(),
                    error: function () {
                        // alert("数据传输错误");
                    }, success: function (data) {
                        if(data.code == 2){
                            layer.msg(data.msg);
                            return;
                        }
                        layer.closeAll();
                        layer.msg(data.msg);
                        location.reload();
                    }
                });
            },
        });
    }

    function newImageType(){
        layer.open({
            type: 1,
            title:'新增图片类型',
            area: ['600px', '500px'],
            fixed: false, //不固定
            maxmin: true,
            content: $('#imageTypeForm'),
            btn:['确定','取消'],
            yes:function(){
                $.ajax({
                    type: "get",      //data 传送数据类型。post 传递
                    dataType: 'json',  // 返回数据的数据类型json
                    url: defaultUrl + "/controller/imageType/insertImageType",  // yii 控制器/方法
                    cache: false,
                    data: $('#imageTypeForm').serializeJSON(),
                    error:function(){
                        // alert("数据传输错误");
                    },success: function (data) {
                        if(data.code == 2){
                            layer.msg(data.msg);
                            return;
                        }
                        layer.closeAll();
                        layer.msg(data.msg);
                        location.reload();
                    }
                });
            },
        });
    }

</script>
</html>
